Cloudinaryを使ってWordPressの画像を配信してみた

WordPressの画像をデジタル・アセットSaaSのCloudinaryで管理・配信する方法を紹介します。

Cloudinaryとは

Cloudinaryはウェブ・モバイル向けのメディアアセットを管理・加工・配信するSaaSです。

画像のような静的コンテンツだけでなく、動画の管理・ストリーム配信にも対応しています。

1. Cloudinary のアカウント開設

Cloudinary のトップページの「SIGN UP FOR FREE」からアカウント開設します。

アカウント開設にあたり、クレジットカードの登録は不要です。

また、今回の動作確認はFreeプランで検証可能です。Cloudinaryの利用費は発生しません。

2. WordPress のセットアップ

WordPress をセットアップします。

AWSを利用する場合、VPSサービスAmazon LightsailからWordPressがインストール済みのインスタンスを立ち上げるのが簡単です。

3. WordPressにCloudinaryプラグインをインストール

プラグインページで「Cloudinary」をキーワードにプラグインを探します。 Cloudinaryのロゴで提供元が"Cloudinary Ltd."となっているプラグインをインストールしActivateします。

インストール後はWordPressのメニュー一覧にCloudinaryが追加されます。

4.WordPressとCloudinary アカウントと紐付ける

WordPressとCloudinaryの紐づけを行います。

Cloudinaryプラグインの Settings の CLOUDINARY_URL に Cloudinary アカウントの値を設定します。

この値は、Cloudinary管理画面のDashboard→Account Detailsから確認可能です。

以上で準備は完了しました

5.Cloudinaryを利用した画像付きブログ投稿

WordPressから画像付きブログを投稿し、画像の管理・配信にCloudinaryを利用します。

WordPressのブログ作成画面を開きます。

メニューにCloudinaryのアイコンが含まれています。

このメニュー経由で画像を登録します。

ポップアップで表示されるCloudinary画像管理画面の下部には、Cloudinaryに登録済み画像が表示されます。 アカウント開設時にサンプル画像が事前登録されているため、それらが表示されています。

Cloudinary連携後に登録した画像もこの一覧に表示されます。

今回は新規にJPEG画像を登録します。

Cloudinaryには画像フォーマットをブラウザに合わせてJPEG-XRやwebPのようなよりウェブに向いた画像フォーマットに自動変換したり、画質・エンコーディングを最適化する機能があります。

この機能を確認したいため、Format & shapeの

• FormatをAuto
• QualityをAuto

にして画像を挿入します。

WordPressからCloudinaryのメニュー経由で登録した画像は、WordPress ではなく Cloudinary に登録されます。

6.配信された画像を確認

公開したブログ記事を確認します。

Cloudinaryプラグインで登録した画像のURLは次の様になります。

https://res.cloudinary.com/CLOUD-NAME/image/upload/f_auto,q_auto/v1546077635/Creative_commons.jpg

URL のパス部分に f_auto,q_auto が含まれています。

• f_auto は画像フォーマットを自動変換
• q_auto は画質・エンコーディングの自動最適化

を表します。

この画像のレスポンスヘッダーを確認すると

content-type: image/webp

となっています。

URL の拡張子は JPEG(Creative_commons.jpg)ですが、実際は WebP で配信されていることがわかります。

なお content-disposition が filename="Creative_commons.webp" となっているため、URL の末尾とは異なるファイル名「Creative_commons.webp」で保存されます。

7. f_auto/q_autoによる画像フォーマット・サイズの違い

今回利用したJPEG画像に対してf_auto/q_auto のパラメーターのあり・なしで画像フォーマットとファイルサイズを調べたのが次のテーブルです。

クライアントのブラウザは Chrome です。

f_auto	q_auto	format	file size(byte)
なし	なし	JPEG	21498
なし	あり	JPEG	17835
あり	なし	WebP	10292
あり	あり	WebP	9188

検証に利用した画像に関して言えば、画像フォーマットが WebP になるだけで、ファイルサイズがほぼ半分に半減しています。

最後に

WordPressとCloudinaryを連携し、Cloudinaryでブログ画像の管理・配信をしてみました。

クライアントに応じた画質・フォーマットの最適化配信をCloudinaryにオフロード出来ることがおわかりいただけたかと思います。

今回は画像管理にWordPressのプラグインを利用しましたが、SDKなどを利用してCloudinaryに登録&リクエストするURLを生成すれば同じことが実現出来ます。

それでは。

参考

• Installing the Cloudinary WordPress Plugin
• Associating Your WordPress Media Library with Cloudinary via the Plugin
• Image optimization